<template>
  <view :class="[ns.b(), ns.m(modelData.id), ...controller.containerClass]">
    <view :class="ns.b('left')">
      <uni-icons type="person" size="25"></uni-icons>
    </view>
    <view :class="ns.b('center')">
      <view :class="ns.e('username')">
        {{ srfusername || srfpersonname }}
      </view>
      <view :class="ns.e('org')">{{ srforgname }}</view>
    </view>
    <view :class="ns.b('right')"
      ><uni-icons type="right" size="16"></uni-icons
    ></view>
  </view>
</template>
<script lang="ts">
export default {
  options: {
    addGlobalClass: true,
    virtualHost: true,
    styleIsolation: "shared"
  }
}
</script>
<script setup lang="ts">
import { IPanelRawItem } from "@ibiz/model-core";
import { PanelItemController } from "@ibiz-template/runtime";
import { useNamespace } from "@/use";
import { PropType } from "vue";

const props = defineProps({
  modelData: {
    type: Object as PropType<IPanelRawItem>,
    required: true,
  },
  controller: {
    type: PanelItemController,
    required: true,
  },
});

const ns = useNamespace("user-info");
const c = props.controller;
const {
  srfusername = ibiz.i18n.t("components.panelComponent.authUserinfo.visitor"),
  srfpersonname,
  srforgname,
} = ibiz.appData?.context || {};
</script>
<style lang="scss">
@import "./i-biz-auth-userinfo.scss";
</style>
